<template>
  <div class="">
    <div class="breadcrumb">
      <router-link :to="{name: 'giftsCenter'}" class="bread_a">礼包中心</router-link> <i class="el-icon-arrow-right"></i>
      领取品牌券
    </div>
    <div class="brand_title mar-top15">领取品牌券 <span class="color-gray99">可领取数量{{currentsurNum}}</span></div>
    <div class="border_bt mar-top30"></div>
    <ul class="brand_group">
      <li v-for="(child, index) in brandVoucherList" :key="index" class="brandItem" :class="{'disabled':!currentsurNum || !child.canGet }">
        <div class="brandItem_left">
          <img :src="prefixImg + child.brandImg" height="40px" />
          <p class="brandItem_name">{{child.brandName}}优惠券</p>
        </div>
        <div class="brandItem_right">
          <p class="price"><em class="tag">¥</em>{{child.amount}}</p>
          <p class="limit">满{{child.limitAmount}}可用</p>
          <button class="btn-receive"
            :class="{'disabled': currentsurNum === 0 || !child.canGet}"
            :disabled="currentsurNum === 0 || !child.canGet"
            @click="getBrand(child.id)">{{child.canGet ? '立即领取' : '已领取'}}</button>
        </div>
      </li>
    </ul>
    <el-row v-if="pageObj.totalRecords && pageObj.totalRecords > 15" style="width:100%;">
      <el-pagination layout="total, prev, pager, next, ->" :current-page.sync="page" :page-size="pageObj.pageSize"
        :total="pageObj.totalRecords" @current-change="handlePage" class="page_box"></el-pagination>
    </el-row>
  </div>
</template>

<script>
import {prefixImg} from '@/tool/index'
import {mapActions, mapState} from 'vuex'
import {getBrandVoucherlist, saveBrandVoucherlist} from '@/service/get-data'
import {Row, Pagination} from 'element-ui'
import {throttle} from '@/tool/tool'
export default {
  components: {
    elRow: Row,
    elPagination: Pagination
  },
  computed: {
    ...mapState({
      surplusNum: state => state.levelInfoObj.surplusNum
    }),
    prefixImg () {
      return prefixImg
    }
  },
  data () {
    return {
      currentsurNum: 0, // 领取次数
      brandVoucherList: [
      ],
      pageObj: {},
      page: 1
    }
  },
  methods: {
    ...mapActions(['getUserLevelInfo']),
    // 品牌池里的品牌券
    async fetchBrandVoucherlist () {
      let res = await getBrandVoucherlist(this.page)
      if (res.data.resultCode && res.data.resultCode === 2000) {
        res = res.data
        this.brandVoucherList = res.data.list
        this.pageObj = res.data.page
      } else {
        this.$message.error(res.data.resultMsg)
      }
    },
    // 领取品牌券
    async getBrandVoucher (id) {
      if (this.currentsurNum === 0) return
      let res = await saveBrandVoucherlist(id)
      if (res.data.resultCode && res.data.resultCode === 2000) {
        this.currentsurNum > 0 && --this.currentsurNum
        this.$message('领取成功')
        this.fetchBrandVoucherlist()
      } else if (res.data.resultCode && res.data.resultCode === 6000) {
        this.$message.error(res.data.resultMsg)
      } else {
        this.$message.error('领取失败')
      }
    },
    getBrand (id) {
      throttle(this.getBrandVoucher(id), 2000)
    },
    handlePage (currentPage) {
      this.page = currentPage
      this.fetchBrandVoucherlist()
    }
  },
  mounted () {
    this.getUserLevelInfo().then(res => {
      console.log('mounted')
      this.currentsurNum = this.surplusNum
    })
    this.fetchBrandVoucherlist()
  }
}
</script>

<style lang="scss" scoped>
  .brand_group{
    margin-top: 22px;
    overflow: hidden;
  }
  .brand_title{
    @include fontbase( #333,18px, 25px)
  }
  .border_bt{
    @include border_bt
  }
  .brandItem{
    position: relative;
    display: table;
    text-align: center;
    width: 276px;
    overflow: hidden;
    float: left;
    margin-bottom: 18px;
    margin-right: 26px;
    font-size: 14px;
    cursor: pointer;
    &:nth-child(3n){
      margin-right: 0;
    }
    &::after{
      position: absolute;
      content: "";
      width: 25px;
      height: 25px;
      background: #ffffff;
      right: -12.5px;
      border-radius: 50%;
      top: 40%;
    }
    &_left{
      display: table-cell;
      // width: 155px;
      padding: 10px 0;
      border: 1px solid #EDEDED;
      border-right: none;
      padding-top: 20px;
    }
    &_name{
      @include fontbase(#333333,14px, 2)
    }
    &_right{
      display: table-cell;
      padding: 10px 0;
      width: 140px;
      background: #F85858;
      color: #ffffff;
      vertical-align: middle;
     
    }
    .price{
      font-size: 33px;
      line-height: 45px;
    }
    .limit{
      @include fontbase(#ffffff,12px, 20px)
    }
    .tag{
      color: #ffffff;
      font-size: 20px;
      vertical-align: middle;
    }
  }
  .btn-receive{
    display: inline-block;
    width:89px;
    height:25px;
    line-height: 25px;
    background:rgba(255,255,255,1);
    border-radius:17px;
    color: #333333;
    font-size: 12px;
    margin-top: 4px;
    border:none;
    cursor: pointer;
  }
   .disabled{
     cursor:not-allowed;
     .brandItem_right{
        background:#C1C1C1;
      }
       .btn-receive{
        background:rgba(255,255,255,0.5);
        color: #999999;
      }
    }
</style>
